<template>
  <div>
    <div>
      法币交易明细
    </div>
    <div class="search-box">
      <el-form ref="filter" label-width="70px" label-position="left" :model="filter" style="display: flex">
        <el-form-item label="市场ID">
          <el-input v-model="filter.markId" size="small" style="width:200px;margin-right:20px;"></el-input>
        </el-form-item>
        <el-form-item label="交易类型">
          <el-select v-model="filter.type" size="small" placeholder="请选择交易类型" style="width:200px;margin-right:20px;">
            <el-option label="买入" value="买入"></el-option>
            <el-option label="卖出" value="卖出"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="成交价格">
          <el-input v-model="filter.price" size="small" style="width:200px;margin-right:20px;"></el-input>
        </el-form-item>
        <el-form-item label="成交数量">
          <el-input v-model="filter.count" size="small" style="width:200px;margin-right:20px;"></el-input>
        </el-form-item>
        <el-form-item label="成交时间">
          <el-input v-model="filter.time" size="small" style="width:200px;margin-right:20px;"></el-input>
        </el-form-item>
      </el-form>
      <el-button size="small" type="warning" @click="search">查询</el-button>
      <el-button size="small" type="" @click="reset">重置</el-button>
    </div>
    <!--参数列表-->
    <div style="overflow:hidden;border-top:1px solid #ccc">
      <el-table :data="tradeList" stripe style="width:100%" v-loading="loading">
        <el-table-column prop="markId" label="市场ID" min-width="80"></el-table-column>
        <el-table-column prop="remark1" label="买方用户名" min-width="80"></el-table-column>
        <el-table-column prop="buyFee" label="买方手续费" min-width="80"></el-table-column>
        <el-table-column prop="remark2" label="卖方用户名" min-width="80"></el-table-column>
        <el-table-column prop="sellFee" label="卖方方手续费" min-width="80"></el-table-column>
        <el-table-column prop="type" label="交易类型" min-width="80"></el-table-column>
        <el-table-column prop="price" label="成交价格" min-width="80"></el-table-column>
        <el-table-column prop="count" label="成交数量" min-width="80"></el-table-column>
        <el-table-column prop="sum" label="成交金额" min-width="80"></el-table-column>
        <el-table-column prop="time" label="成交时间" min-width="80"></el-table-column>
      </el-table>
      <!--分页功能-->
      <el-pagination
        style="margin-top:20px;justify-content:flex-end;display:flex;"
        @size-change="sizeChange"
        @current-change="currentChange"
        :current-page.sync="currentPage"
        :page-size="10"
        layout="prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  import server from '../../services/index'
  export default {
    components: {},
    data () {
      return {
        filter:{
          markId:"",
          type:"",
          price:"",
          count:"",
          time:"",
        },
        tradeList: [],
        loading: false,
        total: 0,
        currentPage: 1,
        pageSize: 10,
      }
    },
    methods:{
      getListData(){
        this.loading = true;
        let params = {
          pageSize: this.pageSize,
          pageNum: this.currentPage,
        }
        $.ajax({
          url:server.tradeList.url,
          type:'get',
          data:params,
          dataType:'json',
          success:res => {
            if(res.code == 1){
              this.loading = false;
              this.tradeList = res.result.tradeList;
              this.total = res.result.total;
            }
          },
          error:err =>{
            this.$message({
              message: err.responseJSON.error,
              type: 'error'
            });
          }
        });
      },
      sizeChange(val){
        this.pageSize = val;
        this.getListData();
      },
      currentChange(val){
        this.currentPage = val;
        this.getListData();
      },
      search(){
        this.loading = true;
        let params = {
          pageSize: this.pageSize,
          pageNum: this.currentPage,
        }
        if(this.filter.markId) params.markId = this.filter.markId;
        if(this.filter.type) params.type = this.filter.type;
        if(this.filter.price) params.price = this.filter.price;
        if(this.filter.count) params.count = this.filter.count;
        if(this.filter.time) params.time = this.filter.time;
        if(!params.markId&&!params.type&&!params.price&&!params.count&&!params.time){
          this.getListData();
        }else{
          $.ajax({
            url:server.searchTradeList.url,
            type:'get',
            data:params,
            dataType:'json',
            success:res => {
              if(res.code == 1){
                this.loading = false;
                if(!res.result){
                  this.tradeList = [];
                }else{
                  this.tradeList = res.result.tradeList;
                  this.total = res.result.total;
                }
              }
            },
            error:err =>{
              this.$message({
                message: err.responseJSON.error,
                type: 'error'
              });
            }
          });
        }


      },
      reset(){
        this.filter.markId = "";
        this.filter.type = "";
        this.filter.price = "";
        this.filter.count = "";
        this.filter.time = "";
        this.getListData();
      },
      getNowFormatDate(time) {
        var date = time;
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var strDate = date.getDate();
        if (month >= 1 && month <= 9) {
          month = "0" + month;
        }
        if (strDate >= 0 && strDate <= 9) {
          strDate = "0" + strDate;
        }
        var currentdate = year + "-" + month + "-" + strDate;
        return currentdate;
      },
    },
    mounted(){
      if(!window.sessionStorage.getItem("token"))this.$router.push({path: '/'});
      this.getListData()
    }
  }
</script>

<style scoped>
  .search-box{
    margin: 20px 0;
  }
</style>
